

// tslint:disable:no-empty
import React from 'react';
import {Image, ScrollView, View, Button,Text,StyleSheet} from 'react-native';
import {List, Flex,Toast,Carousel} from '@ant-design/react-native';
import { Rating} from 'react-native-elements';
import Loading from '../publi/loading'

const Item = List.Item;
const Brief = Item.Brief;
export default class Douban extends React.Component {
    constructor(props) {
        super(props);   //这一句不能省略，照抄即可

        this.state = {
            moviesList: null,  //这里放你自己定义的state变量及初始值
        };

    }



    static navigationOptions = {
        title: '豆瓣电影',
        tabBarIcon: ({focused}) => {
            const icon = focused
                ? require('../assets/images/tab_home_active.png')
                : require('../assets/images/tab_home.png');
            return <Image source={icon} style={{height: 22, width: 22}}/>;
        },

    };
    componentDidMount()
    {

        this.fetchData();
    }

    fetchData()
    {
        fetch('https://api.douban.com/v2/movie/in_theaters?apikey=0b2bdeda43b5688921839c8ecb20399b', {
            method: 'GET'
        })
            .then((response) => response.json())
            .then((responseData) => {

               this.setState({
                    moviesList:responseData.subjects,
                });
            })
            .catch((error) => {
                callback(error);
            });
    }

    render()
    {
        const {navigate} = this.props.navigation;
        if (!this.state.moviesList) {
            return this.renderLoadingView();
        }
        return this.renderMovie(this.state.moviesList,navigate);
    }

    renderMovie(moviesList,navigate) {


        return (
            <ScrollView
                style={{flex: 1, backgroundColor: '#f5f5f9'}}
                automaticallyAdjustContentInsets={false}
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
            >
                <Carousel
                    style={styles.wrapper}
                    selectedIndex={2}
                    autoplay
                    infinite
                >
                    {
                        moviesList.map((item,key)=>{
                            return (<View
                                key={key}
                                style={[styles.containerHorizontal]}
                            >
                                <Image source={{uri: item.images.large}}
                                       style={{height:'100%', width:'100%'}}/>
                            </View>)
                        })
                    }

                </Carousel>
                <List renderHeader={'即将上映电影'}>
                    {
                        moviesList.map((item,key)=>{
                            return (
                                <Item
                                    wrap
                                    multipleLine
                                    align="top"
                                    key={key}

                                    onPress={() =>
                                        navigate('Dyxq', {
                                            title: item.title,
                                            id:item.id
                                        })
                                    }

                                >
                                    <View style={{flex: 1, flexDirection: 'row'}} >
                                        <View style={{ paddingLeft: 4, paddingRight: 0, paddingTop: 4,paddingBottom:4, width:100}}>
                                            <Image source={{uri: item.images.small}}
                                                   style={{height:80, width:70}}/>
                                        </View>
                                        <View style={{ paddingLeft: 0, paddingRight: 4, paddingTop: 4,paddingBottom:4,}}>
                                            <Text style={{color:'#000',fontSize: 16}}>{item.title}</Text>

                                            <View style={{flex: 1, flexDirection: 'row',height:5,paddingTop: 4}}>
                                            <Rating
                                                imageSize={20}
                                                readonly
                                                startingValue={ (Number(item.rating.average)/10) * 5 }
                                            /><Text style={{color:'#000',paddingLeft: 10,fontSize: 16}}>{item.rating.average}分</Text>
                                            </View>
                                            <Text style={{color:'#8d8d8d'}}>上映时间：{item.mainland_pubdate}</Text>
                                        </View>

                                    </View>
                                </Item>
                            )
                        })
                    }

                </List>

            </ScrollView>

        );



    }

    renderLoadingView()
    {
        return (
            <Loading />

        );
    }


}
const styles = StyleSheet.create({
    wrapper: {
        backgroundColor: '#fff',
    },
    containerHorizontal: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 150,
    },
    containerVertical: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 150,
    },
    text: {
        color: '#fff',
        fontSize: 36,
    },
});
